'use client';

import './style.scss';
import BlogTitle from './components/blogTitle';
import Modal from '@/app/_components/modal';
import { useState } from 'react';
import UserPage from '@/app/user/page'
import Link from 'next/link';

function Page() {
    const [open, setOpen] = useState(false);

    return (
        <div className="blog-page">
            <h1 className="mb-6 text-4xl">blog page</h1>
            <BlogTitle>nextjs超级简单入门教程</BlogTitle>

            search: <input type="text" placeholder="input your keywords" />
            <div className="mb-6">
                <Link href="/user">user avatar image</Link>
            </div>
            <h2>blog content</h2>
            <p>However, when navigating to the photo by clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.</p>
            <p>Intercepting routes can be defined with the (..) convention, which is similar to relative path convention ../ but for segments.</p>
            <div>
                You can use:

                (.) to match segments on the same level
                (..) to match segments one level above
                (..)(..) to match segments two levels above
                (...) to match segments from the root app directory
            </div>

            <div className="page-con">
                <button onClick={() => setOpen(true)}>show modal</button>
            </div>

            <Modal title="提示" open={open} onClose={() => setOpen(false)}>
                <div>
                    <p>
                        确认要删除吗？
                    </p>
                    <div>
                        <button>确定</button>
                        <button>取消</button>
                    </div>
                </div>
            </Modal>


        </div>
    )
}

export default Page